<template>
	<view>
		<view class="container">
			<view class="top_box">
				<view v-if="myInfo">
					<view class='activity_title'>
						<!-- <text>活动名称：</text> -->
						<text>
							报名人信息
						</text>
					</view>
					<view class="user_info">
						<view class='headervw'>
							<text>姓名：</text>
							<text class='headertx'>
								{{myInfo.name}}
							</text>
						</view>
						<view class='headervw'>
							<text>电话：</text>
							<text class='headertx'>
								{{myInfo.phone}}
							</text>
						</view>
						<view class='headervw'>
							<text>性别：</text>
							<text class='headertx' v-if="myInfo.sex!='' || myInfo.age != null">
								{{myInfo.sex == 1 ? '男':'女'}}
							</text>
							<text class='headertx' v-else>
								无
							</text>
						</view>
						<view class='headervw'>
							<text>年龄：</text>
							<text class='headertx'>
								{{myInfo.age == ''|| myInfo.age == null ?'无':myInfo.age}}
							</text>
						</view>
						<view class='headervw'>
							<text>报名时间：</text>
							<text class='headertx'>
								{{myInfo.createDate}}
							</text>
						</view>
					</view>
				</view>
				<view>
					<view class='activity_title'>
						<!-- <text>活动名称：</text> -->
						<text>
							{{detailData.activityName}}
						</text>
					</view>
					<view class='headervw'>
						<text>报名人数：</text>
						<text class='headertx'>
							{{checkPassNum}}
						</text>
					</view>
					<view class='headervw'>
						<text>报名开始时间：</text>
						<text class='headertx'>
							{{detailData.activityEnrollStartTime}}
						</text>
					</view>
					<view class='headervw'>
						<text>报名截止时间：</text>
						<text class='headertx'>
							{{detailData.activtiyEnrollEndTime}}
						</text>
					</view>
				</view>
			</view>
			<view class="bottom_box">
				<view class='activity_title'>
					<text>活动介绍</text>
				</view>
				<view class="activity_text">
					<!-- <text>{{detailData.activityDescribe}}</text> -->
					<rich-text :nodes="richText"></rich-text>
				</view>
			</view>
		</view>
		<view class="page-bottom">
			<image src="../../../static/phone.png" style="width: 36upx;height: 36upx;margin-left: 60upx;"></image>
			<!-- <text style="font-size: 44upx;margin-left: 60upx;" @click="phoneCall">&#9742</text> -->
			<view class="consult" @click="phoneCall">
				咨询电话
			</view>
			<button class="apply" style="background-color: #55aaff;" v-if="myInfo.isCheck == 0">审核中</button>
			<button class="apply" style="background-color: #A8DB96;" v-if="myInfo.isCheck == 1">已通过</button>
			<button class="apply" style="background-color: #FF7B7B;" v-if="myInfo.isCheck == 2">未通过</button>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import htmlParser from '@/config/html-parser'
	export default {
		data() {
			return {
				detailData: {
					activityPropagatePic: '',
					activityName: '',
					activitySource: '',
					activityStartTime: '',
					activityEndTime: '',
					activityAddress: '',
					activityPersonNum: '',
					activityEnrollStartTime:'',
					activtiyEnrollEndTime: ''
				},
				name: '',
				sexType: '',
				types: [
					"男", "女"
				],
				phoneNumber: '',
				checkPassNum: 0,
				richText: '',
				myInfo: {
					name:'',
					phone:'',
					sex:'',
					age:'',
					createDate:''
				}
			}
		},
		onLoad(options) {
			let id = options.id;
			let info = JSON.parse(decodeURIComponent(options.myInfo));
			if (info) {
				this.myInfo = info
			}
			this.getActivityById(id)
		},
		components: {
			uniPopup
		},
		methods: {
			close(done) {
				this.$refs.popup.close()
			},

			getActivityById: function(id) {
				let that = this;
				this.$api.request.getActivityById({
					"id": id
				}, function(res) {
					if (res.body.status.statusCode === '0') {
						that.detailData = res.body.data.entity.activity;
						that.checkPassNum = res.body.data.entity.checkPassNum;
						that.phone = that.detailData.activityPhoneNum;
						var content = that.detailData.activityDescribe;
						that.richText = that.$api.htmlParser.parseHtml(content);
					}
				})
			},
			phoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.detailData.activityPhoneNum
				});
			},
			bindTypeChange(e) {
				this.sexType = this.types[e.target.value]
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100vh;
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		height: calc(100vh - 100upx);
		padding: 0 20upx;
		// height: 100vh;
		background-color: #FBFBFB;
		overflow: hidden;
		overflow-y: scroll;
	}

	.img_box {
		text-align: center;
		margin-bottom: 20upx;
		// border-radius: 10upx;
		// background-color: #666666;
		height: 300upx;
	}

	.inputBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16upx;
	}

	.applyInput {
		width: 60%;
		height: 60upx;
		border: 2upx solid #aaaaaa;
		display: flex;
		align-items: center;
		justify-content: left;
		border-radius: 16upx;
		padding-left: 16upx;
		// margin-top: 16upx;
	}

	.activity_img {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}

	.activity_text {
		padding: 0 10upx 30upx 10upx;
	}

	.activity_title {
		margin-top: 30upx;
		font-size: 34upx;
		margin-bottom: 20upx;
		// margin-left: 10upx;
		font-weight: bold;
	}

	.page-bottom {
		position: fixed;
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .2);
		border-radius: 10upx;
	}

	.consult {
		font-size: 36upx;
		margin-left: 20upx;
		color: #FF7B7B;
	}

	.apply {
		color: white;
		font-size: 36upx;
		margin-right: 30upx;
		height: 80upx;
		width: 360upx;
		line-height: 80upx;
		border-radius: 16upx;
	}

	.headervw {
		width: calc(100% - 20upx);
		height: 50upx;
		line-height: 50upx;
		margin: 10upx 0;
		background-color: white;
		padding-left: 20upx;
		border-radius: 10upx;
		/* text-align: center; */
	}

	.headertx {
		font-size: 28upx;
		/* line-height: 60upx; */
	}

	.top_box {
		width: 100%;
	}

	.user_info {
		width: 100%;
		padding: 20upx 0;
		margin: 20upx 0;
		background-color: white;
		border-radius: 20upx;
	}
</style>
